import { useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import Button from '@mui/material/Button'
import { getUserList } from '@/api/mock'
import { RootState, Dispatch } from '@/store'
import { useTranslation } from 'react-i18next'

export default function test() {
  const { t } = useTranslation()
  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch<Dispatch>()
  const token = useSelector((state: RootState) => state.app.token) // 引入test model中的count数据
  const app = useSelector((state: RootState) => state.app.state) // 引入test model中的count数据
  const count = useSelector((state: RootState) => state.test.count) // 引入test model中的count数据
  const fetchvalue = useSelector((state: RootState) => state.test.fetchvalue) // 引入test model中的count数据
  const userinfo = useSelector((state: RootState) => state.app.userinfo) // 引入test model中的count数据

  const onTestAdd = () => {
    dispatch.app.increment(5)
    dispatch.test.onTestAdd(2)
  }

  const serverFetch1 = () => {
    dispatch.app.getUserinfo({
      id: 123,
      name: '娃哈哈',
      avatar: '12121'
    })
  }
  const serverFetch = async () => {
    const userList = await dispatch.test.serverFetch()
    console.log(userList)
  }

  const get = () => {
    console.log(location)
  }

  const getRoute = () => {
    console.log(window.location.pathname)
  }

  const getData = async () => {
    const { data } = await getUserList()
    console.log(data)
  }

  useEffect(() => {
    console.log(fetchvalue)
  }, [fetchvalue])
  useEffect(() => {
    console.log(userinfo)
  }, [userinfo])
  return (
    <div>
      <h2 onClick={get}>{t('test.title')}</h2>
      <p>
        测试多语言：{t('common.actions.edit')}---
        {t('common.actions.del')}
      </p>
      <div onClick={() => navigate('/')}>去首页</div>
      <div onClick={() => navigate('/login', { state: { path: location.pathname } })}>去登录页</div>
      <div onClick={getRoute}>获取路由</div>
      <div onClick={getData}>获取数据</div>
      <div>
        <Button variant="contained" onClick={() => onTestAdd()}>
          通过action改变数据num
        </Button>
        <Button variant="contained" onClick={() => serverFetch1()}>
          app通过action获取用户信息
        </Button>
        <Button variant="contained" onClick={() => serverFetch()}>
          test通过action获取用户信息
        </Button>
        <br />
        store中数据num：
        {count}
        <br />
        app store中数据num：
        {app}
        <br />
        app token中数据：
        {token}
      </div>
    </div>
  )
}
